用Swift开发iOS10 - 7 定制Table Views

发表于 | 分类于 | | 阅读次数:
字数统计: 1.1k | 阅读时长 ≈ 5

项目简介

开始用Swift开发iOS 10 - 6 创建简单的Table Based App是basic风格的Table，这一部分将：

  1. 使用UITableViewController 代替 UITableView
  2. 展示table view cell中不同的图片显示方式
  3. 设计定制的table view cell来替代basic的table view cell

使用UITableViewController新建一个Table View App

  • 新建项目FoodPin，模板为”Single View application”
  • 删除Main.storyboard中的 view controller，删除ViewController.swift
  • 拖动一个Table View Controller到IB中，选中其Is Initial View Controller

image-20190305100900407

  • 新建类RestaurantTableViewController，继承至UITableViewController。
1
2
3
4
5
import UIKit
import Foundation
class RestaurantTableViewController: UITableViewController{
//code
}
  • 将Table View Controller的Class属性设置为RestaurantTableViewController。

image-20190305102141799

1
var restaurantNames = ["Cafe Deadend", "Homei", "Teakha", "Cafe Loisl", "PetiteOyster", "For Kee Restaurant", "Po's Atelier", "Bourke Street Bakery", "Haigh'sChocolate", "Palomino Espresso", "Upstate", "Traif", "Graham Avenue Meats","Waffle & Wolf", "Five Leaves", "Cafe Lore", "Confessional", "Barrafina","Donostia", "Royal Oak", "CASK Pub and Kitchen"]
  • 在类RestaurantTableViewController中添加代码：
1
2
3
4
5
6
7
8
9
override func tableView(_ tableView: UITableView, cellForRowAt indexPath:
IndexPath) -> UITableViewCell {
    let cellIdentifier = "Cell"
    let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier,
for: indexPath)
    // Configure the cell...
    cell.textLabel?.text = restaurantNames[indexPath.row]
    cell.imageView?.image = UIImage(named: "restaurant.jpg")
return cell }
  • 插入代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cellIdentifier = "Cell"
        let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier,
                                                 for: indexPath)
        // Configure the cell...
        cell.textLabel?.text = restaurantNames[indexPath.row]
        cell.imageView?.image = UIImage(named: "restaurant.jpg")
        return cell
   }

  override func numberOfSections(in tableView: UITableView) -> Int {
    return 1
  }

  override func tableView(_ tableView: UITableView, numberOfRowsInSection
section: Int) -> Int {
    return restaurantNames.count
  }
  • 在类RestaurantTableViewController中加入图片名称变量：
1
2
3
4
5
6
var restaurantImages = ["cafedeadend.jpg", "homei.jpg", "teakha.jpg",
"cafeloisl.jpg", "petiteoyster.jpg", "forkeerestaurant.jpg", "posatelier.jpg",
"bourkestreetbakery.jpg", "haighschocolate.jpg", "palominoespresso.jpg",
"upstate.jpg", "traif.jpg", "grahamavenuemeats.jpg", "wafflewolf.jpg",
"fiveleaves.jpg", "cafelore.jpg", "confessional.jpg", "barrafina.jpg",
"donostia.jpg", "royaloak.jpg", "caskpubkitchen.jpg"]

并修改对应代码：
cell.imageView?.image = UIImage(named: restaurantImages[indexPath.row])

定制Table View Cells

  • 修改Table View Cell的Sytle变为Custom，Identifier为Cell
  • 修改Table View 的Row Height为80

image-20190305133600724

  • 确认Table View Cell 的Custom被选择打钩，且Row Height为80

image-20190305103718930

  • 拖动image view到Cell中

  • 拖动三个label到Cell中，文本分别是Name，Location，Type。Name 的font为Headline；Location的font style为Light，font size为14，font color为Dark Gray；Type**font style为Light，font size**为13。

  • 把三个label设置成一个vertical stack view，其spacing为1

  • 把vertical stack view和Image View设置成一个horizontal stack view，其spacing为10

  • 为vertical stack view设置上下左右边距约束；为图片设置宽和高的约束

  • 处理约束问题

为Custom Cell创建类

  • 创建继承至UITableViewCell的类RestaurantTableViewCell
  • 在RestaurantTableViewCell中建立四个outlet，分别对应图片和三个label
1
2
3
4
@IBOutlet var nameLabel: UILabel!
@IBOutlet var locationLabel: UILabel!
@IBOutlet var typeLabel: UILabel!
@IBOutlet var thumbnailImageView: UIImageView!

  • 建立代码中接口与storyboard之间的联系

    image-20190305111804961

修改Table View Controller代码

  • 由于已经为Custom Cell创建了类RestaurantTableViewCell，所以Table View Controller中生成Cell的待修改为：
1
2
let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier,
                                                 for: indexPath) as! RestaurantTableViewCell
  • 由于Cell的风格不是sytle了，而是定制的，所以文本和图片代码要做出修改：
1
2
cell.nameLabel.text = restaurantNames[indexPath.row]
cell.thumbnailImageView.image = UIImage(named: restaurantImages[indexPath.row])

图片圆角

  • 可通过UIView的layer属性（CALayer）修改图片圆脚，cornerRadius表示圆角的半径，由于图片的尺寸是60*60，所以圆角的半径设置为30后，图片看上去是个圆。
1
2
cell.thumbnailImageView.layer.cornerRadius = 30.0
cell.thumbnailImageView.clipsToBounds = true

位置和类型label设置

  • 添加“Type”和“Location”。添加如下两个数组变量：
1
2
3
4
var restaurantLocations = ["Hong Kong", "Hong Kong", "Hong Kong", "Hong Kong",
                               "Hong Kong", "Hong Kong", "Hong Kong", "Sydney", "Sydney", "Sydney", "NewYork", "New York", "New York", "New York", "New York", "New York", "New York",
                               "London", "London", "London", "London"]
 var restaurantTypes = ["Coffee & Tea Shop", "Cafe", "Tea House", "Austrian Causual Drink", "French", "Bakery", "Bakery", "Chocolate", "Cafe", "American Seafood", "American", "American", "Breakfast & Brunch", "Coffee & Tea", "Coffee & Tea", "Latin American", "Spanish", "Spanish", "Spanish", "British", "Thai"]

然后再在Cell时赋值即可：

1
2
cell.locationLabel.text = restaurantLocations[indexPath.row] 
cell.typeLabel.text = restaurantTypes[indexPath.row]
  • 结果：

image-20190305132947628

练习

  • 重新设计界面：
    • 修改Table View和Table View Cell的Row Height都为300。
    • 重新设计图片与label的之间的层次结构，并修改图片的大小和其他一些约束。
    • 删除图片圆角

###